<template>
  <view class="login-page">
    <!-- 页面标题 -->
    <view class="login-title">用户登录</view>
    
    <!-- 登录表单 -->
    <view class="login-form">
      <!-- 用户名输入 -->
      <view class="form-item">
        <input 
          type="text" 
          v-model="username" 
          placeholder="请输入用户名" 
          class="input-field"
        />
      </view>
      
      <!-- 密码输入 -->
      <view class="form-item">
        <input 
          type="password" 
          v-model="password" 
          placeholder="请输入密码" 
          class="input-field"
        />
      </view>
      
      <!-- 登录按钮 -->
      <button 
        type="primary" 
        class="login-btn"
        @click="handleLogin"
      >
        登录
      </button>
      
      <!-- 其他操作 -->
      <view class="login-links">
        <navigator url="../register/register" class="link">注册账号</navigator>
        <navigator url="../forget/forget" class="link">忘记密码</navigator>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',  // 用户名
      password: ''   // 密码
    }
  },
  methods: {
    // 处理登录逻辑
    handleLogin() {
      // 简单验证
      if (!this.username) {
        uni.showToast({
          title: '请输入用户名',
          icon: 'none'
        });
        return;
      }
      
      if (!this.password) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none'
        });
        return;
      }
      
      // 这里可以添加实际登录请求逻辑
      uni.showLoading({
        title: '登录中...'
      });
      
      // 模拟登录请求
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '登录成功'
        });
        
        // 登录成功后跳转首页
        setTimeout(() => {
          uni.switchTab({
            url: '../home/home'
          });
        }, 1000);
      }, 1500);
    }
  }
}
</script>

<style>
.login-page {
  display: flex;
  flex-direction: column;
  padding: 60upx 40upx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.login-title {
  font-size: 36upx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 80upx;
  color: #333;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 30upx;
}

.form-item {
  background-color: #fff;
  border-radius: 8upx;
  padding: 0 20upx;
}

.input-field {
  width: 100%;
  height: 80upx;
  font-size: 28upx;
  border-bottom: 1px solid #eee;
}

.input-field:last-child {
  border-bottom: none;
}

.login-btn {
  height: 90upx;
  line-height: 90upx;
  font-size: 32upx;
  border-radius: 8upx;
  margin-top: 40upx;
}

.login-links {
  display: flex;
  justify-content: space-between;
  margin-top: 40upx;
  padding: 0 20upx;
}

.link {
  color: #007aff;
  font-size: 26upx;
}
</style>
